<template>
    <div class="student">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <button @click="sendStudentName">把学生名给App</button>
        <button @click="unBind">解绑自定义事件</button>
        <button @click="demo">触发demo事件</button>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Student',
    data() {
        return {
            name: '张三',
            sex: '男',
            number: 0
        }
    },
    methods: {
        sendStudentName() {
            // 触发vc实例上的自定义myEvent事件
            this.$emit('myEvent', this.name, 999, 888, 777)
        },
        unBind() {
            // this.$off('myEvent') // 解绑单个自定义事件
            console.log('自定义事件解绑了')
            // this.$off(['myEvent','demo']) // 解绑多个事件
            this.$off() // 解绑所有自定义事件
        },
        demo() {
            this.$emit('demo')
        }
    },
}
</script>

<style scoped>
.student {
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
}
</style>